import React from 'react';
import InfoBanner from '../components/InfoBanner';
import BlogInfo from '../components/BlogInfo';
import Footer from '../components/Footer';
import MyBackUp from '../components/MyBackTop';
import { connect } from 'react-redux';
import { setWidth } from '../store/app.redux';
import { getBlogInfo } from '../store/blogInfo.redux';
import { getCommentInfo } from '../store/comment.redux';
import { setUserInfo } from '../store/app.redux';
import { getLocalUserInfo } from '../utils/global';

@connect(
    state => ({
        blogInfoData: state.blogInfo.blogInfoData
    }),
    {
        getBlogInfo,
        getCommentInfo,
        setWidth,
        setUserInfo
    }
)
class index extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    changeStateWidth = (e_width) => {
        this.props.setWidth(e_width)
    }

    handleResize = e => {
        let e_width = e.target.innerWidth;
        this.changeStateWidth(e_width);
    }
    componentDidMount() {
        window.addEventListener('resize', this.handleResize.bind(this)) //监听窗口大小改变
        let clientW = document.documentElement.clientWidth;
        this.changeStateWidth(clientW);
        this.getInitData(); //初始化获取数据
    }

    getInitData = async () => {
        const { blogId } = this.props.match.params
        let userInfo = getLocalUserInfo();
        await this.props.setUserInfo(userInfo); //redux获取用户数据
        await this.props.getBlogInfo({ blogId, ...userInfo }); //redux请求生成blog数据
        await this.props.getCommentInfo(blogId);//redux请求生成comment数据
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.handleResize.bind(this));
    }

    render() {
        return (
            <>
                <InfoBanner />
                <BlogInfo />
                <Footer />
                <MyBackUp />
            </>
        );
    }
}

export default index;